<template>
    <div>
      <div>
        <h1>运单详情</h1>
        <Button @click="downloadExcel">下载温度详情</Button>
        <table style="width: 100%">
            <tr>
                <td>发货单号</td>
                <td>创建时间</td>
                <td>客户名称</td>
                <td>公司地址</td>
                <td>联系人姓名</td>
                <td>结束时间</td>
                <td>运单状态</td>
                <td>温度</td>
                <td>联系人电话</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>{{tableData.gnum}}</td>
                <td>{{tableData.create_time}}</td>
                <td>{{tableData.cid}}</td>
                <td>{{tableData.cid}}</td>
                <td>{{tableData.cid}}</td>
                <td v-if="tableData.state==1">{{tableData.state}}</td>
                <td v-else>暂无</td>
                <td v-if="tableData.state==1">完成</td>
                <td v-else>在途</td>
                <td v-if="tableData.state==1">
                  <span v-if="tableData.baojing==1">
                    <font color="#FF0000">报警</font>
                  </span>
                  <span v-else>
                    正常
                  </span>
                </td>
                <td v-else>暂无</td>
                <td>{{tableData.cid}}</td>
                <td>
                  <span v-if="tableData.state==1">
                    已收货
                  </span>
                  <span v-else>
                    <Button @click="shouhuo(scope.row.id)">收货</Button>
                  </span>
                </td>
            </tr>
        </table>
      </div>
      <div>
        <!-- 地图 -->
        <div class="amap-page-container">
          <h1>运单信息</h1>
          <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
            <!-- <el-amap-polyline :editable="polyline.editable"  :path="polyline.path" :events="polyline.events" :key="polyline.id"></el-amap-polyline> -->
            <el-amap-rectangle v-for="retangle in retangles" :events="retangle.events" :center="retangle.center"  :bounds="retangle.bounds" :fill-color="retangle.fillColor" :fill-opacity="retangle.fillOpacity" :key="retangle.id"></el-amap-rectangle>
          </el-amap>
        </div>
        <!-- # 折线表 -->
        <div class="v-charts">
          <h1>温度数据 /°C</h1>
          <ve-line :data="chartData"></ve-line>
        </div>
      </div>
  </div>
</template>
<style>
    .v-charts{
      float: right;
      height: 400px;
      width: 400px;
    }
    .amap-page-container {
      float: left;
      height: 400px;
      width: 400px;
    }
</style>
<script>
import { showgoods_post,shouhuo_post,goods_get } from './axios_api/api';
  export default {
    data() {
      return {
        blist:[],
        // excel
        selectData:[],
        // excelData:[],
        
        tableData: [],
        zoom: 12,
        center: [116.418757,39.917544],
        retangles: [
            {
              // visible:true,
              id:1,
              center: [116.418757,39.917544],
              bounds: [[116.418757,39.917544], [119.137357,36.709494]],
              fillOpacity: 0.7,
              fillColor: '#ffffff',
              events: {
                click: () => {
                  alert('click');
                }
              }
            }
          ],
        chartData: {
          columns: ['time', 'wen'],
          rows: []
        }
      }
    },
    mounted(){
      this.gettag();
    },
    methods:{
      shouhuo(id){
          var id = id
          var data = {id:id}
          shouhuo_post(data).then(resp=>{
              this.$Message(resp.message)
          })
        },
      gettag(){
        var id = this.$route.query.id;
        var params = {id:id}
        goods_get(params).then(resp=>{
          this.tableData = resp.goodslist;
          this.blist = resp.goodslist.blist;
          this.chartData.rows = resp.goodslist.blist;
          console.log(this.tableData);
        })
      },

      // 文件下载
      downloadExcel() {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../excel/Export2Excel')
                const tHeader = ['日期','温度']  
                const filterVal = ['time','wen']  
                const list = this.blist
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, '温度详情');
            })
				},
				// 文件下载所调用函数
        formatJson(filterVal, jsonData) {
            // console.info(jsonData)
            return jsonData.map(v => filterVal.map(j => v[j]))
        },





    //   // excel下载
    //    //列表下载
    //     downloadExcel() {
    //       this.$confirm('确定下载列表文件?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).then(() => {
    //         this.excelData = this.selectData //你要导出的数据list。
    //         this.export2Excel()
    //       }).catch(() => {
    //       });
    //     },
    //  //数据写入excel
    //     export2Excel() {
    //       var that = this;
    //       require.ensure([], () => {
    //         const { export_json_to_excel } = require('@/excel/export2Excel'); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
    //         const tHeader = ['温度']; // 导出的表头名信息
    //         const filterVal = ['wenlist']; // 导出的表头字段名，需要导出表格字段名
    //         const list = that.excelData;
    //         const data = that.formatJson(filterVal, list);
 
    //         export_json_to_excel(tHeader, data, '下载数据excel');// 导出的表格名称，根据需要自己命名
    //       })
    //     },
    //   //格式转换，直接复制即可
    //     formatJson(filterVal, jsonData) {
    //       return jsonData.map(v => filterVal.map(j => v[j]))
    //     },






    }
  }
</script>
